<template>
    <van-share-sheet
      v-model:show="visible"
      title="立即分享给好友"
      :options="options"
      teleport="body"
      @select="onSelect"
    />
</template>

<script>
import { ref, reactive } from 'vue'
import { ShareSheet as VanShareSheet, Toast } from 'vant'
export default {
    name: 'ShareSheet',
    components: {
        VanShareSheet
    },
    emits: ['select'],
    props: {
        // 要分享的地址
        url: {
            type: String
        },
        // 要分享的标题
        title: {
            type: String
        },
        // 要分享的图片地址
        pic: {
            type: String
        }
    },
    setup(props, { emit }) {
        const visible = ref(false)
        const options = reactive([
            {
                name: '微信',
                icon: require('@/assets/images/share_wechat.png'),
                share: false
            },
            {
                name: '朋友圈',
                icon: require('@/assets/images/share_discover.png'),
                share: false
            },
            {
                name: '微博',
                icon: require('@/assets/images/share_sina.png'),
                share: true
            },
            {
                name: 'QQ',
                icon: require('@/assets/images/share_qq.png'),
                share: true
            },
            {
                name: 'QQ空间',
                icon: require('@/assets/images/share_qzone.png'),
                share: true
            },
            {
                name: '复制链接',
                icon: require('@/assets/images/share_link.png'),
                share: false
            }
        ])        
        const show = () => {
            visible.value = true
        }        
        const onSelect = (option, index) => {
            const { name, share } = option
            if (!share) {
                if (name !== '复制链接') {
                    Toast('请使用微信打开，并点击右上角分享功能分享给好友')
                } else {
                    Toast('功能开发中')
                }
            } else {
                let req = ''
                const url = encodeURIComponent(props.url)
                const title = props.title
                const pic = props.pic
                if (name === '微博') {
                    req = `http://service.weibo.com/share/share.php?url=${url}&sharesource=weibo&title=${title}&pic=${pic}&appkey=`
                } else if (name === 'QQ') {
                    req = `http://connect.qq.com/widget/shareqq/index.html?url=${url}&sharesource=qzone&title=${title}&pics=${pic}&summary=${title}&desc=${title}`
                } else if (name === 'QQ空间') {
                    req = `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&title=${title}&desc=${title}&summary=${title}&pics=${pic}`
                }
                window.open(req)
            }
            emit('select', option, index)                        
        }
        
        return {
            visible,
            options,
            show,
            onSelect
        }
    }
}
</script>

<style>

</style>